<template>
    <div>
        <van-form validate-first @submit="onSubmit">
            <eagle-input label="标题" v-model="form.caseTitle" required ></eagle-input>
            <eagle-input v-model="form.EquipmentName" name="EquipmentName" label="培训计划名称" required></eagle-input>
            <eagle-checkbox v-model="form.IsValid" label="是否有效"></eagle-checkbox>
            <eagle-checkgroup v-model="form.HarmValue" :dataSource="HarmList" label="标题" :option="{label:'Name',value:'ID'}" direction="horizontal"></eagle-checkgroup>
            <!-- 证件类型 -->
            <vant-field-select
                label="证件类型"
                name='idTypeText'
                nameId="idType"
                placeholder="请选择"
                v-model="formData.idTypeText"
                :columns="idTypecolumn"
                @getMessage="setSelectValue"
            />
            <van-field class="input_text" name="checkboxGroup" label="事故分类">
                <template #input>
                    <van-checkbox-group v-model="HarmArr" direction="horizontal" @change="handleChecked">
                        <van-checkbox :name="item.ID" shape="square" v-for="(item, index) in HarmList" :key="index">{{ item.Name }}</van-checkbox>
                    </van-checkbox-group>
                </template>
            </van-field>
            <eagle-radio v-model="form.radioSimple" label="单选框单独"></eagle-radio>
            <eagle-radio-group v-model="form.radioValue" :dataSource="HarmList" label="单选框测试" :option="{label:'Name',value:'ID'}" direction="horizontal"></eagle-radio-group>
            <eagle-date v-model="form.PlanDate" required label="计划结束日期" placeholder="请选择" title="选择计划日期"></eagle-date>
            <eagle-date v-model="form.CheckRange" required label="时间范围" placeholder="请选择" title="选择时间范围" calendarType="range"></eagle-date>
            <van-dropdown-menu>
                <eagle-dropdown-item :options="myOptions" v-model="form.PurchaseType" title="商品分类" @change="myChange"></eagle-dropdown-item>
            </van-dropdown-menu>
            <eagle-dropdown-menu>
                <div slot>
                    <eagle-dropdown-item :options="myOptions" v-model="form.PurchaseType" title="商品分类" @change="myChange"></eagle-dropdown-item>
                    <eagle-dropdown-item :options="myOptions2" v-model="form.MyOrder" @change="myOrderChange"></eagle-dropdown-item>
                </div>
            </eagle-dropdown-menu>
            <eagle-dropdown-menu :dataSource="filterParams" :conditions="conditions"></eagle-dropdown-menu>
            <eagle-date-picker v-model="form.PurchaseDate" label="购物日期"></eagle-date-picker>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>
<script>
export default {
    name:'mfCusPersBaseInfoInsert',
    //import引入的组件需要注入到对象中才能使用
    components: {
        
    },
    props: {
    },
    data() {
        //这里存放数据
        return {
            form:{
                EquipmentName:"",
                IsValid:false,
                PurchaseType:1,
                MyOrder:1,
            },
            formData:{
                idTypeText:'',
                idType:"",
            },//客户实体
            idTypecolumn: [
                {text:"身份证",keyId:"0"},
                {text:"护照",keyId:"2"},
                {text:"军官证",keyId:"3"},
                {text:"港澳居民来往内地通行证",keyId:"5"},
                {text:"其他",keyId:"10"}
            ],
            HarmList:[],
            HarmArr:[],
            myOptions:[
                { text: '全部商品', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 }
            ],
            myOptions2:[
                { text: '默认排序', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
            ],
            filterParams:[
                {
                    title:"商品分类",
                    name:"PurchaseType",
                    data:[
                        { text: '全部商品', value: 0 },
                        { text: '新款商品', value: 1 },
                        { text: '活动商品', value: 2 }
                    ]
                },
                {
                    title:"排序",
                    name:"MyOrder",
                    data:[
                        { text: '默认排序', value: 'a' },
                        { text: '好评排序', value: 'b' },
                        { text: '销量排序', value: 'c' },
                    ]
                }
            ],
            conditions: {
                type: Object,
                default: () => {
                    return {};
                },
            },
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        setSelectValue(name,value){
            let a=name.split("Text")[0];
            this.formData[a]=value;
            // document.getElementById(name).value=value;
        },
        onSubmit(values) {
            
            this.formData;
            alert(this.form.EquipmentName)
            console.log('submit', values);
        },
        handleChecked(){
            
            this.form.HarmValue = this.HarmArr
                this.HarmArr.join();
        },
        myChange(val){
            
        },
        myOrderChange(val){
            
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        for(var i=0;i<8;i++){i
            this.HarmList.push({
                ID:"'"+i+"'",
                Name:"伤害类型"+i,
            })
        }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less'>
</style>